<script setup lang="ts">
import DiyHeader from "./components/diyHeader.vue";

import { ref, computed } from "vue";
import type { DefineComponent } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { components, componentList } from "@/components/mobilePage/index";
import * as _ from "lodash-es";
import { nanoid } from "nanoid";
import draggable from "vuedraggable";

interface ComponentItem {
  name: string;
  component: DefineComponent;
  type: number; // 根据实际情况调整
  cname?: string;
}

// 左侧菜单
const leftMenu = ref<
  {
    title: string;
    list: ComponentItem[];
    isOpen: boolean;
    type: number;
  }[]
>([]); // 存储分类结果

const categorizeComponents = () => {
  const categories = [
    {
      title: "基础组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 0,
    },
    {
      title: "营销组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 1,
    },
    {
      title: "工具组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 2,
    },
  ];
  componentList.forEach((component) => {
    const category = categories.find((cat) => cat.type === component.type);
    if (category) {
      category.list.push(component);
    }
  });
  leftMenu.value = categories;
};

const addDom = (element: HTMLElement, type: Number) => {
  console.log("element", element);
  addDomCon(element, type);
};

const activeConfigName = ref("");
const rConfig = ref({});

const addDomCon = (element: any, type: Number, index?: number) => {
  let obj = {};
  let timestamp = new Date().getTime() * 1000;
  element.num = `${timestamp}`;
  element.id = `id${timestamp}`;
  activeConfigName.value = element.name;
  let tempItem = JSON.parse(JSON.stringify(element));
  if (type) {
    rConfig.value = [];
  }
};

const cloneDog = (item: any) => {
  return { ...item, id: nanoid() }; // 使用新ID防止冲突
};

// 初始化时自动分类
categorizeComponents();
</script>

<template>
  <div class="wrapper">
    <div class="header">
      <DiyHeader />
    </div>
    <div class="content-grid">
      <div class="left-panel">
        <div class="p-2">
          <div
            class="cursor-pointer rounded border p-3 mb-2 hover:shadow-md"
            v-for="(item, index) in leftMenu"
            :key="index"
          >
            <div
              class="flex items-center justify-center"
              @click="item.isOpen = !item.isOpen"
            >
              <div class="mr-1">{{ item.title }}</div>
              <div class="iconfont icon-right" v-if="!item.isOpen"></div>
              <div class="iconfont icon-right" v-else></div>
            </div>
            <draggable
              class="dragArea list-group"
              v-model="item.list"
              :group="{ name: 'people', pull: 'clone', put: false }"
              :clone="cloneDog"
              item-key="id"
              :dragClass="'dragClass'"
            >
              <template #item="{ element, index }">
                <div
                  class="list-group-item"
                  @click="addDom(element, 1)"
                  v-show="item.isOpen"
                >
                  <div>
                    <div class="position" style="display: none">
                      释放鼠标将组件添加到此处
                    </div>
                    <div class="iconfont icon-lunbotu text-2xl"></div>
                    <p class="conter">{{ element.cname }}</p>
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </div>

      <div class="center-panel">
        <div v-for="i in 100" :key="i">{{ i }}</div>
      </div>

      <div class="right-panel">
        <div v-for="i in 100" :key="i">{{ i }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  @apply h-screen w-screen grid grid-rows-[auto_1fr] overflow-hidden;

  .header {
    @apply flex h-[50px] items-center border-b p-3 bg-blue-600 text-white text-sm;
  }

  .content-grid {
    @apply grid h-full w-full grid-cols-[auto_1fr_auto] min-h-0;

    .left-panel {
      @apply w-[400px] border-r h-full overflow-y-auto;
    }

    .center-panel {
      @apply bg-gray-100 h-full overflow-y-auto;
    }

    .right-panel {
      @apply w-[400px] border-l h-full overflow-y-auto;
    }
  }
}

.dragArea.list-group {
  display: flex;
  flex-wrap: wrap;

  .list-group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 66px;
    margin-right: 17px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;

    &:hover {
      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
      border-right: 5px;
      transform: scale(1.1);
      transition: all 0.2s;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
